<template>
	<div id="content">
		<!-- 显示图标 -->
		<div class="iconBox">
			<span  v-show="!showAudio" @click="setVolume(true) ">
				<svg t="1667556888803" class="icon" viewBox="0 0 1024 1024" version="1.1"  p-id="5613" width="18" height="18"><path d="M128 420.576v200.864h149.12l175.456 140.064V284.288l-169.792 136.288H128z m132.256-64l204.288-163.968a32 32 0 0 1 52.032 24.96v610.432a32 32 0 0 1-51.968 24.992l-209.92-167.552H96a32 32 0 0 1-32-32v-264.864a32 32 0 0 1 32-32h164.256zM752 458.656L870.4 300.8a32 32 0 1 1 51.2 38.4L792 512l129.6 172.8a32 32 0 0 1-51.2 38.4l-118.4-157.856-118.4 157.856a32 32 0 0 1-51.2-38.4l129.6-172.8-129.6-172.8a32 32 0 0 1 51.2-38.4l118.4 157.856z" p-id="5614"></path></svg>
			</span>
			<span v-show="showAudio" @click="setVolume(false)">
				<svg t="1667556994312" class="icon" viewBox="0 0 1024 1024" version="1.1"  p-id="5768" width="18" height="18"><path d="M128 420.576v200.864h149.12l175.456 140.064V284.288l-169.792 136.288H128z m132.256-64l204.288-163.968a32 32 0 0 1 52.032 24.96v610.432a32 32 0 0 1-51.968 24.992l-209.92-167.552H96a32 32 0 0 1-32-32v-264.864a32 32 0 0 1 32-32h164.256zM670.784 720.128a32 32 0 0 1-44.832-45.664 214.08 214.08 0 0 0 64.32-153.312 213.92 213.92 0 0 0-55.776-144.448 32 32 0 1 1 47.36-43.04 277.92 277.92 0 0 1 72.416 187.488 278.08 278.08 0 0 1-83.488 198.976zM822.912 858.88a32 32 0 1 1-45.888-44.608A419.008 419.008 0 0 0 896 521.152c0-108.704-41.376-210.848-114.432-288.384a32 32 0 0 1 46.592-43.872c84.16 89.28 131.84 207.04 131.84 332.256 0 127.84-49.76 247.904-137.088 337.728z" p-id="5769" fill="#4caf50"></path></svg>
			</span>
		</div>
		
		<audio  id="audioAlixian"  >
			<source src="./Alixian.wav" type="audio/mpeg">
			您的浏览器不支持 音频播放器。
		</audio>
		<audio  id="audioBjieti"  >
			<source src="./Bjieti.wav" type="audio/mpeg">
			您的浏览器不支持 音频播放器。
		</audio>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				showAudio:false,
			};
		},
		mounted(){
			this.setVolume(0,false)
		},
		methods: {
			playAudio(type) {
				// console.log(this.showAudio)
				if(!this.showAudio){
					return false;
				}
				
				if(type == 'A'){
					document.getElementById('audioAlixian').play();
				}else if(type == 'B'){
					document.getElementById('audioBjieti').play();
				}
				
			},
			//设置音量
			setVolume(showAudio){
				this.showAudio = showAudio;
			}
		},
	}
</script>

<style scoped="scoped">
.iconBox{
	cursor: pointer;
	position: absolute;
    top: 18px;
    right: 88px;
    color: #909399;
    cursor: pointer;
}


</style>
